<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新年快乐</title>
	<link href="stylesheets/fixed-positioning.css" rel="stylesheet" type="text/css" />
	<link href="stylesheets/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
	<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
	<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>

	<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>

	<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
		<h1>Happy New Year!</a></h1>
		<h2 class="happy-new-year">新年快乐！</h2>
		
		<p>向下看 ;-)</p>
		<p class="arrows"></p>
	</div>

	<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
		<h2>要礼物么？</h2>
		<p>继续向下看 ;-)</p>
	</div>

	<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
		<br><h2>这是礼物</h2>
		<p>blah blah blah</p>
	</div>

	<div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
		<div id="easing" data-3900="left:100%" data-4600="left:25%;">
			<h2>打开礼物?</h2>
			<p>当然</p>
			<p>可是天突然变暗了，打开 <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">灯</span>...</p>
			<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">。。。</p>
		</div>

		<div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;"></div>
		<div class="drop" data-6500="left:85%;bottom:100%;" data-9500="bottom:0%;"></div>
	</div>

	<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;border-width:0px;" data-12000="top:10%;border-radius:2em;border-width:10px;">
		<h3>恭喜发财:D</h3>
		<p>你可以修改这个模板实现自己的功能。</p>
		<p><strong>这是个开源软件 <a href="https://github.com/objcc/HappyNewYearIOS">GitHub</a> 喜欢请赞一下, it's open source!</strong></p> 
		<p>制作：<a href="http://weibo.com/objcc" class="twitter-share-button" data-url="http://weibo.com/objcc" data-via="AndroidAPP">@苏炜</a>
		</p>
		<p>基于开源项目 <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">Skrollr</a> <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">@Prinzhorn</a>.</p>
		<p>感谢 Vicki Wenderlich 提供的开源图片</p>
	</div>

	<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>

	<script type="text/javascript" src="dist/skrollr.min.js"></script>

	<!--[if lt IE 9]>
	<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
	<![endif]-->

	<script type="text/javascript">
	var s = skrollr.init({
		edgeStrategy: 'set',
		easing: {
			WTF: Math.random,
			inverted: function(p) {
				return 1-p;
			}
		}
	});
	</script>
</body>

</html>
